import { Pagination } from 'antd';
import '../index.less';
import { realImgs } from '@/utils';
import { useEffect, useState } from 'react';
import { CloseOutlined } from '@ant-design/icons';

export default function DetailImgs({ NUM = 100, imgIndex = null, setImgUrl }: any) {
  const { allImgs, erWei } = realImgs(NUM);
  const [list, setList] = useState(erWei[0]);
  const pageChange = (page: number) => setList(erWei[page - 1]);

  useEffect(() => {
    if (imgIndex === null) return;
    setImgUrl(allImgs[imgIndex]);
  }, [imgIndex]);

  return (
    // 211高
    <div className="detailImgs">
      <div className="dpimgs flex">
        {list.map((item: any, i: number) => (
          <div
            className="dpimg pointer"
            key={i}
            style={{
              background: `url(${item}) no-repeat center`,
              backgroundSize: 'auto 140%',
            }}
            onClick={() => setImgUrl(item)}
          ></div>
        ))}
      </div>
      <div className="pageWrap">
        <Pagination defaultCurrent={1} total={NUM} onChange={pageChange} />
      </div>
    </div>
  );
}
